<template>
	<com-page :bg-color="skinColor.color_bg_1">
		<com-nav-bar border :title="(isEdit ? '编辑' : '添加') + typeLabel" :color="skinColor.color_1" :bg-color="skinColor.color_bg_1" :border-color="skinColor.color_gap_1" />
		<list :bounce="false" class="y-flex-1">
			<header>
				<form-header text="亮色模式"></form-header>
			</header>
			<cell v-for="(key, i) in Object.keys(lightForm)">
				<form-item v-model="lightForm[key]" :type="style[key].type" :label="style[key].label"
				v-if="style[key]"
				:disabled="disabled"
				closeable
				@selectIcon="handleIconSelect('lightForm', key)"
				@close="handleClose('lightForm', key)"></form-item>
			</cell>
			<cell>
				<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleStyleSelect('lightForm')">
					<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
					<text class="fs-30" :style="{color: skinColor.color_1}">添加亮色样式</text>
				</view>
			</cell>
			<header>
				<form-header text="暗黑模式"></form-header>
			</header>
			<cell v-for="(key, i) in Object.keys(darkForm)">
				<form-item v-model="darkForm[key]" :type="style[key].type" :label="style[key].label" :disabled="disabled"
				v-if="style[key]"
				closeable
				@selectIcon="handleIconSelect('darkForm', key)"
				@close="handleClose('darkForm', key)"></form-item>
			</cell>
			<cell>
				<view class="y-flex y-row y-align-center y-justify-center pt-30 pb-30" @tap="handleStyleSelect('darkForm')">
					<com-icon name="add" size="40" :color="skinColor.color_1"></com-icon>
					<text class="fs-30" :style="{color: skinColor.color_1}">添加暗黑样式</text>
				</view>
			</cell>
			<slot></slot>
		</list>
		<view class="y-flex page-padding-gap pt-20 pb-20 border-top-1" :style="{'background-color': skinColor.color_bg_1, 'border-top-color': skinColor.color_gap_1}">
			<com-button size="35" padding="20rpx 30rpx" type="primary" value="保存组件" @click="submit"></com-button>
			<com-safe-bottom></com-safe-bottom>
		</view>
	</com-page>
</template>

<script>
	import FormItem from '../components/FormItem.vue'
	import FormHeader from '../components/Header.vue'
	import { Component } from '@/assets/js/interface.js'
	export default {
		components: { FormItem, FormHeader },
		inject: ['selectOptions', 'selectIcon', 'deleteProperty', 'getSkinColor', 'getQuery', 'getType'],
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.getType()
			},
			typeLabel () {
				return Component[this.type].label
			},
			style () {
				return Component[this.type].style
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				isEdit: false,//是否是编辑
				lightForm: {},//亮色样式
				darkForm: {}//暗色样式
			}
		},
		created () {
			if ( this.originForm ) {
				this.isEdit = true
				const style = this.originForm.style || {}
				const darkStyle = this.originForm.darkStyle || style.darkStyle || {}
				Object.keys(style).forEach(key => {
					this.lightForm[key] = style[key]
				})
				Object.keys(darkStyle).forEach(key => {
					this.darkForm[key] = darkStyle[key]
				})
			}
		},
		methods: {
			handleClose (formName, k) {
				this[formName] = this.deleteProperty(this[formName], k)
			},
			handleIconSelect (formName, key) {
				this.selectIcon({
					success: res => {
						this.$set(this[formName], key, res.name)
						this.$set(this[formName], 'refreshadd', res.name)
						this.$nextTick(() => {
							this[formName] = this.deleteProperty(this[formName], 'refreshadd')
						})
					}
				})
			},
			handleStyleSelect (formName) {
				if ( this.disabled ) return
				this.selectOptions({
					title: '选择添加的样式',
					actions: Object.keys(this.style).filter(key => Object.keys(this[formName]).indexOf(key) == -1).map(key => this.style[key].label),
					success: res => {
						const keys = Object.keys(this.style)
						const index = keys.findIndex(key => this.style[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this[formName], key, this.style[key].value)
					}
				})
			},
			submit () {
				this.$emit('submit', {
					name: this.type,
					style: this.lightForm,
					darkStyle: this.darkForm
				})
			}
		}
	}
</script>

<style>
</style>